<template>
  <div class="verify-login">
    <div class="tab">
      <el-link type="info" :underline="false" @click="jumpUser" v-if="configLogin.user == 1"
        >密码登录</el-link
      >
      <el-link type="primary" :underline="false" v-if="configLogin.verify == 1">验证码登录</el-link>
    </div>
    <el-form
      v-if="configLogin.verify == 1"
      :model="verifyForm"
      :rules="verifyRules"
      ref="verifyForm"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="verifyForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item class="drag-verify">
        <edu-drag-verify
          ref="dragVerify"
          :height="38"
          :width="340"
          radius="2px"
          :isPassing.sync="isPassing"
          text="请按住滑块，拖动到最右边"
          successText="验证通过"
          handlerIcon="el-icon-d-arrow-right"
          successIcon="el-icon-circle-check"
          @passcallback="passcallback('verifyForm')"
        ></edu-drag-verify>
      </el-form-item>
      <el-form-item prop="verify">
        <el-row type="flex" class="verifyCode">
          <el-input v-model="verifyForm.verify" placeholder="请输入验证码"></el-input>
          <EduVerificationCode
            @start="getVerifyCode('verifyForm')"
            :disabled="btnDisabled"
          ></EduVerificationCode>
        </el-row>
      </el-form-item>
      <el-row type="flex" justify="space-between" align="middle" class="modify">
        <el-link type="info" :underline="false" @click="gopwdReset">忘记密码？</el-link>
        <el-row type="flex" align="middle">
          <span class="no-text">还没有账号？</span>
          <el-link type="primary" :underline="false" @click="goRegister()">马上去注册</el-link>
        </el-row>
      </el-row>
      <div class="reginter-footer">
        <el-button class="login-submit" type="primary" @click="handleVerifyLogin('verifyForm')"
          >登录</el-button
        >
      </div>
    </el-form>
    <user-other></user-other>
  </div>
</template>

<script>
import UserOther from './loginOther.vue'
import EduDragVerify from '@/components/EduDragVerify'
import EduVerificationCode from '@/components/EduVerificationCode'
import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  components: {
    UserOther,
    EduDragVerify,
    EduVerificationCode
  },
  data() {
    // 手机号码的校验
    var testPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!this.$util.mobile(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
    return {
      isPassing: false,
      verifyForm: {
        logintype: 'verify',
        phone: '',
        verify: ''
      },
      verifyRules: {
        phone: [{ validator: testPhone, trigger: 'blur' }],
        verify: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      btnDisabled: true
    }
  },
  computed: {
    ...mapGetters({
      configLogin: 'projectSetting/getGlobLoginConfig'
    })
  },
  created: function() {
    // 登录回车事件
    document.onkeydown = e => {
      var key = window.event.keyCode
      if (key == 13) {
        this.handleVerifyLogin('verifyForm')
      }
    }
  },
  methods: {
    // 跳转到账号登录
    jumpUser() {
      this.$emit('currentTab', 'login_account')
    },
    goRegister() {
      this.$emit('currentTab', 'login_register')
    },
    gopwdReset() {
      this.$emit('currentTab', 'login_password')
    },
    // 提交登录
    handleVerifyLogin(formName) {
      var that = this
      that.$refs[formName].validate(valid => {
        if (valid) {
          store
            .dispatch('user/verifyLogin', {
              ...that.verifyForm
            })
            .then(res => {
              that.$message.success(res.msg) // 登录成功提示
              that.$emit('handleSuccess') // 登录成功返回关闭弹窗
              that.$refs[formName].resetFields() // 登录成功重置表单
            })
            .catch(err => {
              that.$message.error(err.msg)
            })
        } else {
          return false
        }
      })
    },
    // 滑动验证通过
    passcallback(formName) {
      var that = this
      that.$refs[formName].validateField('phone', valid => {
        if (!valid) {
          this.btnDisabled = false
        } else {
          that.dragVerifyReset()
          return false
        }
      })
    },
    // 获取验证码
    getVerifyCode(formName) {
      var that = this
      that.$refs[formName].validateField('phone', valid => {
        if (!valid) {
          that.$api.createSmsVerify(
            { phone: that.verifyForm.phone, type: 'login' },
            res => {
              that.$message.success(res.msg)
            },
            error => {
              that.$message.error(error.msg)
            }
          )
        } else {
          return false
        }
      })
    },
    // 重置滑动验证
    dragVerifyReset() {
      var that = this
      that.isPassing = false
      that.$refs.dragVerify.reset()
    }
  }
}
</script>
